<template>
	<view class="performance_center" :data-theme="themeStyle">
		<view class="h-view">
			<view class="head_view"
				:style="{backgroundImage:`url(${$util.img('public/uniapp/h5/fenxiao/bgm_performance_center.png')})`}">
				<view class="head_label">店铺粉丝跨店消费奖励</view>
				<view class="head_item">
					<view class="head_t">{{headDict.received}}</view>
					<view class="head_c">已领取奖励(元)</view>
				</view>
				<view class="head_item">
					<view class="head_t">{{headDict.notSettlement}}</view>
					<view class="head_c">待结算奖励(元)</view>
				</view>
			</view>
			<view class="t_view">
				<picker mode="date" :value="date" @change="bindDateChange" fields="month">
					<view class="uni-input">{{date}}<text class="iconfont iconiconangledown"></text></view>
				</picker>
				<block v-if="headDict.notReceived > 0">
					<view class="receive no" @click="keyGetEvent">一键领取</view>
				</block>
				<block v-else>
					<view class="receive yes">已领取</view>
				</block>
			</view>
			<view class="list-tabs">
				<view class="tab-item" :class="{'current-tab':currentTab == index}" v-for="(item,index) in listTabs"
					:key="index" @click="turnListTab(index)">{{item.title}}</view>
			</view>
		</view>
		<mescroll-uni ref="mescroll" size="10" top="500" @getData="getListData">
			<block slot="list">
				<view class="list">
					<ns-empty v-if="datalist.length == 0" text="暂无相关记录" :fixed="false" :isIndex="false"></ns-empty>
					<view class="liet_item" v-for="(item,index) in datalist" :key="item.id">
						<view class="part1">
							<view class="part1-left">
								<view class="avatar_state_view">
									<image class="avatar" :src="item.direct_headimg" mode="aspectFit"></image>
									<!-- <view class="state_view" v-if="">金牌店</view> -->
								</view>
								<view class="name_view">
									<view class="nick">{{item.direct_nickname}}</view>
									<view class="mobile_time_view">{{item.direct_mobile}} ｜{{item.create_time}}</view>
								</view>
							</view>
							<view class="part1-right">

								<view class="settle_state_view wait_settle" v-if="item.is_settlement == 1">待结算</view>
								<view class="settle_state_view" v-else-if="item.is_settlement == 2">已结算</view>
								<view class="settle_state_view" v-else>已退款</view>
								<block v-if="item.is_settlement == 2">
									<view class="re_but no" v-if="item.status == 1" @click="receiveOnceButEvent(item)">
										领取</view>
									<view class="re_but yes" v-else="item.status == 2">已领取</view>
								</block>

							</view>
						</view>
						<view class="part2">
							<view class="text_view">交易金额 ¥{{item.amount}}</view>
							<view class="text_view">我的奖励 {{item.commission}}</view>
						</view>
					</view>
				</view>
			</block>
		</mescroll-uni>

		<!-- 返回顶部 -->
		<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import scroll from '@/common/js/scroll-view.js';
	import toTop from '@/components/toTop/toTop.vue';
	export default {
		components: {
			toTop
		},
		mixins: [scroll, globalConfig],
		data() {
			const currentDate = this.getDate();
			const initDate = this.getDate(true)
			return {
				date: currentDate,
				listTabs: [{
					title: '全部',
					value: '0'
				}, {
					title: '待结算',
					value: '1'
				}, {
					title: '已结算',
					value: '2'
				}, {
					title: '已退款',
					value: '3'
				}],
				currentTab: 0,
				uploadDate: initDate,
				listParams: {
					page: 1,
					page_size: 10,
					last_page: 1
				},
				datalist: [],
				headDict: {
					received: '', //已领取值
					notReceived: '' //未领取值
				},
				isOnce: false
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '店铺奖励'
			});
			if (uni.getStorageSync('token')) {
				this.getHeadData()
				if (this.$refs.mescroll) this.$refs.mescroll.refresh();
			} else {
				setTimeout(() => {
					this.$util.redirectTo('/otherpages/fenxiao/index/index', {}, 'redirectTo');
				});
			}
		},
		onPullDownRefresh() {
			this.$refs.mescroll.refresh();
		},
		onReachBottom() {

		},
		methods: {
			turnListTab(index) {
				this.currentTab = index;
				this.$refs.mescroll.refresh();
			},
			/* 头部数据 */
			getHeadData() {
				this.$api.sendRequest({
					url: '/fenxiao/api/Receive/tatolCommission',
					success: res => {
						if (res.code == 0) {
							this.headDict = res.data;
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				})
			},
			/* 获取列表数据 */
			getListData(mescroll) {
				uni.stopPullDownRefresh()
				this.$api.sendRequest({
					url: '/fenxiao/api/Receive/getCommissionList',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						month: this.uploadDate,
						is_settlement: this.listTabs[this.currentTab].value
					},
					success: res => {
						if (res.code == 0) {
							let {
								page_count,
								list
							} = res.data;
							list = list.map(item => {
								return {
									...item,
									create_time: this.$util.timeStampTurnTime(item.create_time, '.')
										.replace(/-/g, '.')
								}
							})
							if (mescroll.num == 1) {
								this.datalist = list;
							} else {
								this.datalist = [...this.datalist, ...list]
							}
							mescroll.endSuccess(this.datalist.length);
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				})
			},
			/* 一键领取 */
			keyGetEvent() {
				if (!this.isOnce) {
					this.isOnce = true
					uni.showModal({
						title: '提示',
						content: '一键可领取' + this.headDict.notReceived.toString() + '元，请确认是否领取',
						success: function(res) {
							var that = this
							if (res.confirm) {
								that.$api.sendRequest({
									url: '/fenxiao/api/Receive/receiveCommission',
									data: {
										is_onekey: '1'
									},
									success: res => {
										if (res.code == 0) {
											that.getHeadData()
											that.$refs.mescroll.refresh();
										} else {
											that.$util.showToast({
												title: res.message
											});
										}
										that.isOnce = false
									},
									fail: res => {
										that.isOnce = false
									}
								})
							} else {
								that.isOnce = false
							}
						}.bind(this)
					});
				}
			},
			/* 单次领取 */
			receiveOnceButEvent(item) {
				if (!this.isOnce) {
					this.isOnce = true
					uni.showModal({
						title: '提示',
						content: '本单次领取' + item.commission.toString() + '元，请确认是否领取',
						success: function(res) {
							var that = this
							if (res.confirm) {
								that.$api.sendRequest({
									url: '/fenxiao/api/Receive/receiveCommission',
									data: {
										id: item.id
									},
									success: res => {
										if (res.code == 0) {
											item.status = '2'
										} else {
											that.$util.showToast({
												title: res.message
											});
										}
										that.isOnce = false
									},
									fail: res => {
										that.isOnce = false
									}
								})
							} else {
								that.isOnce = false
							}
						}.bind(this)
					});
				}
			},
			/* 月份选择，数据相应发生变化 */
			bindDateChange(e) {
				var temp = e.detail.value
				var tempArr = temp.split('-')
				this.date = tempArr[0] + '年' + tempArr[1] + '月'
				this.uploadDate = e.detail.value;
				this.$refs.mescroll.refresh();
			},
			/* 获取起始年月 */
			getDate(format) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month > 9 ? month : '0' + month;
				if (format == true) {
					return `${year}-${month}`
				}
				return `${year}年${month}月`;
			},
		}
	}
</script>

<style lang="scss">
	%flex {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flex_left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flex_right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.performance_center {
		background: #F8F8F8;

		.h-view {
			position: fixed;
			top: 0rpx;
			width: 100%;
			padding-bottom: 20rpx;
			z-index: 10;
			background-color: #f8f8f8;

			.head_view {
				position: relative;
				margin: 24rpx 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 280rpx;
				width: 686rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;

				.head_label {
					@extend %flex;
					position: absolute;
					top: 0;
					left: 0;
					width: 320rpx;
					height: 60rpx;
					background: #DB4C3B;
					border-radius: 20rpx 0 20rpx 0;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				.head_item {
					width: 49%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.head_t {
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 50rpx;
					}

					.head_c {
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 33rpx;

					}
				}

				.head_line {
					width: 1rpx;
					height: 42rpx;
					background: #FFFFFF;
				}
			}

			.t_view {
				background: #F8F8F8;
				padding-left: 60rpx;
				padding-right: 52rpx;
				height: 130rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.uni-input {
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: bold;
					color: #303133;
					line-height: 34rpx;
				}

				.receive {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 148rpx;
					height: 64rpx;
					border-radius: 32rpx;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 37rpx;

					&.no {
						background: #FF4544;
						color: #FFFFFF;
					}

					&.yes {
						background: #EEEEEE;
						color: #909399;
					}
				}
			}
		}

		.list-tabs {
			@extend %flex;
			justify-content: space-between;

			.tab-item {
				width: 25%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #999999;
				line-height: 40rpx;

				&.current-tab {
					font-weight: bold;
					color: #000000;
				}
			}
		}

		.list {
			margin-top: 32rpx;
			padding: 20rpx 30rpx;

			.liet_item {
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0rpx 24rpx;

				.part1 {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #DCDEE0;
					display: flex;
					justify-content: space-between;

					.part1-left {
						@extend .flex_left;

						.avatar_state_view {
							@extend %flex;
							position: relative;
							height: 100%;
							margin-right: 24rpx;

							.avatar {
								width: 88rpx;
								height: 88rpx;
								border-radius: 88rpx;
							}

							.state_view {
								@extend %flex;
								position: absolute;
								bottom: -16rpx;
								width: 86rpx;
								height: 32rpx;
								background: #454545;
								border-radius: 18rpx;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 28rpx;
							}
						}

						.name_view {
							.nick {
								font-size: 28rpx;
								font-weight: bold;
								color: #252525;
								line-height: 40rpx;
							}

							.mobile_time_view {
								margin-top: 8rpx;
								font-size: 24rpx;
								color: #999999;
								line-height: 33rpx;
							}
						}
					}

					.part1-right {
						@extend .flex_right;
						justify-content: flex-start;
						flex-direction: column;

						.settle_state_view {
							font-size: 24rpx;
							color: #999999;
							line-height: 33rpx;

							&.wait_settle {
								color: #FF4544;
							}
						}
					}

					.re_but {
						@extend %flex;
						margin-top: 27rpx;
						width: 128rpx;
						height: 52rpx;
						border-radius: 30rpx;
						font-size: 26rpx;
						line-height: 37rpx;

						&.no {
							border: 2rpx solid #FF4544;
							color: #FF4544;
						}

						&.yes {
							background: #F0F0F0;
							color: #C8C9CC;
						}
					}
				}

				.part2 {
					padding: 24rpx 0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.text_view {
						font-size: 24rpx;
						color: #323232;
						line-height: 34rpx;
					}
				}
			}
		}
	}
</style>